import { Steps } from 'antd'
import React, { useState } from 'react'
import ContentList from './ContentList'
import ContentTable from './ContentTable'
import './StepsDetails.css'
const { Step } = Steps

const StepsDetails = (props: any) => {
  const steps = props.stepsData

  const [current, setCurrent] = useState(0)

  const onChange = (value: number) => {
    console.log('onChange:', current)
    setCurrent(value)
  }

  return (
    <>
      <Steps
        current={current}
        onChange={onChange}
        type="navigation"
        labelPlacement="vertical"
        >
        {steps.map(
          (item: { id: React.Key | null | undefined; title: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined }) => (
            <Step
              key={item.id}
              title={item.title}
            />
          )
        )}
      </Steps>

      <div className="steps-content">
        <div className="leftTable">
          <ContentTable content={steps[current].content} title={steps[current].title}/>
        </div>
        <div className="rightList">
          <ContentList
            content={
              current + 1 < steps.length ? steps[current + 1].content : []
            }
          />
        </div>
      </div>
    </>
  )
}

export default StepsDetails
